<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主轴的对齐方式</title>
		<style>
			.box {
				background-color: yellow;
				display: flex;
				/* 主轴的对齐方式 */
				/* 主轴对齐，前提是知道容器现在的主轴方向是什么
				 我们现在使用的就是默认的正向行模式*/
				 /*起点对齐，所有元素从主轴起点开始排 */
				 justify-content: flex-start;
				 /* 终点对齐，所有元素从主轴终点开始排 */
				 justify-content: flex-end;
				 /* 主轴居中对齐 */
				 justify-content: center;
				 /* 均匀排列每个元素,每个元素之间的间隔相等*/
				 justify-content: space-evenly;
				 /* 均匀排列每个元素，每个元素周围分配相同的空间*/
				 justify-content: space-around;
				 /* 两端对齐，首尾元素紧贴两边，中间间距均分 */
				 justify-content: space-between;
			}
			.item {
				width: 100px;
				height: 100px;
				border: 2px solid red;
				font-size: 30px;
			}
			.box2 {
				height: 600px;
				background-color: #0ff;
				display: flex;
				/* 将主轴变为列模式(竖着 从上往下) */
				flex-direction: column;
				justify-content: flex-start;
				justify-content: flex-end;
				justify-content: center;
				justify-content: space-between;
				justify-content: space-around;
				justify-content: space-evenly;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
		
		<div class="box2">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
		</div>
	</body>
</html>